﻿@model dynamic
@{
    ViewBag.Title = Resources.MenuResource.TopMenu_HistoricalData;
    ViewBag.CurrentMainMenu = 4;
}

<div class="middle_left">
    <div class="middle_left_title">
        <div id="openall">全部展开</div>
        <div id="closeall">全部收缩</div>
        <div id="arrow">
            <img src="@Url.Content("~/Content/images/middle_left_title_arrow.gif")" width="8" height="8" />
        </div>
    </div>
    <!--begin tree-->
    <ul id="middle_left_tree" class="ztree">
    </ul>
</div>
<div class="middle_right">
    <iframe id="mainFrame" name="mainFrame" src="@Url.Action("HistoryDataRecordList")" allowtransparency="true" frameborder="0"></iframe>
</div>
<div class="ui-helper-clearfix ui-helper-hidden"></div>
@section css{
    <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/ztree/zTreeStyle.css")"/>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")"/>

    <style type="text/css">
        .middle_left,.middle_right
        {
            position: absolute;
            top: 112px;
        }

        .centerContent
        {
            border-left: 1px solid #b1b1b1;
            position: absolute;
            right: 0;
            top: 0;
            width: 6px;
            height: 100%;
        }

        .centerBar
        {
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            cursor: e-resize;
            background-color: #ebebeb;
            border: 1px solid #f1f1f1;
            border-bottom: 0;
            border-top: 0;
        }

        .middle_right iframe
        {
            position: absolute!important;
            _position: inherit;
            top: 0;
            bottom: 0;
            width: 100%;
            _width: 80%;
            height: 100%;
        }
        .ui-resizable-e
        {
            right: 0;
            width: 6px;
            background-color: #ebebeb;
            border: 1px solid #f1f1f1;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }
            .ui-resizable-e:hover
            {
                width: 12px;
            }
        /*冻结ztree根节点*/
        .ztree li span.button.switch.level0
        {
            visibility: hidden;
            width: 1px;
        }
        .ztree li ul.level0
        {
            padding: 0;
            background: none;
        }
        #middle_left_tree {
            bottom: 1px;
        }
    </style>
}
@section javascript
{
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.9.2.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/ztree/jquery.ztree.all-3.5.js")"></script>
    <script type="text/javascript">
        $(function () {
            $('.middle_left').resizable({
                minWidth: 210,
                maxWidth: 400,
                grid: 20,
                handles: 'e',
                resize: function (event, ui) {
                    $('.middle_right').css('left', ui.size.width + 15);
                },
                stop: function (event, ui) {
                    //重置middle_left的高度，否则改变浏览器窗口大小会出现middle_left的高度与浏览器高度不一致
                    ui.element.css({ 'height': 'auto', 'bottom': 0 });
                    $('.middle_right').css('left', ui.size.width + 10);
                }
            });
            var ztreeSets = {
                data: {
                    simpleData: {
                        pIdKey: 'ParentId',
                        rootPId: 0
                    }
                },
                edit: {
                    enable: true,
                    showRemoveBtn: false,
                    showRenameBtn: isShowEditBtn,
                    renameTitle: '重命名'
                },
                callback: {
                    onRename: onRename
                },
                view: {
                    dblClickExpand: dblClickExpand
                }
            };
            var zNodes = @Html.Raw(ViewBag.TreeData);
            
            $.fn.zTree.init($('#middle_left_tree'), ztreeSets, zNodes);
            $('#openall').click(function () {
                var treeObj = $.fn.zTree.getZTreeObj("middle_left_tree");
                treeObj.expandAll(true);
            });
            $('#closeall').click(function () {
                var treeObj = $.fn.zTree.getZTreeObj("middle_left_tree");
                treeObj.expandAll(false);
                var rootNode = treeObj.getNodeByParam("id", 0, null);
                if (rootNode)
                    treeObj.expandNode(rootNode);
            });
            @Html.Partial("_ShowErrorMessage")
        });
        
        function dblClickExpand(treeId, treeNode) {
            return treeNode.level > 0;
        }

        function isShowEditBtn(treeId, treeNode) {
            return treeNode && treeNode.expandos && (treeNode.expandos.isHost || treeNode.expandos.isKeyword);
        }

        function onRename(event, treeId, treeNode) {
            if (!treeNode.expandos) return true;
            if (treeNode.name == '') return false;
            $.ajax({
                url: '@Url.Action("Rename", "Host")',
                cache: false,
                type: 'post',
                dataType: 'json',
                data: { hostId: treeNode.expandos.hostId, hostName: treeNode.name },
                success: function (result) {
                    if (!result || !result.success) {
                        alert(result.message);
                    }
                }
            });
        }

        function loadFrame(url) {
            $('#mainFrame').attr('src', url);
        }
    </script>
}
